<template>
  <el-dialog
    title="提示"
    :visible.sync="$store.state.isModalShow"
    width="30%"
    center
    @close="doCancel"
    ref="ruleForm"
  >
    <div class="content">
      <el-form label-position="left" label-width="80px" :model="memo">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="memo.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="content">
          <el-input v-model="memo.content"></el-input>
        </el-form-item>
        <el-form-item label="文章分类">
          <el-select v-model="memo.categoryId">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :value="item.value"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button @click="doCancel">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <span slot="footer" class="dialog-footer"> </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { optionItem } from "@/types/index";
import DataItem from "@/modal/dataItem";
// import DataItem from '../modal/dataItem'

@Component({
  components: {},
})
export default class Modal extends Vue {
  // @Prop({
  //   type: DataItem,
  //   default: {}
  // })
  // memo!: DataItem;
  centerDialogVisible: boolean = true;
  memo = new DataItem(-1,0);

  //{
  //   id: -1,
  //   categoryId: 0,
  //   title: '',
  //   content: ''
  // }
  //this.$store.state.transData?this.$store.state.transData:new DataItem(-1,0)
  options: Array<optionItem> = [
    {
      label: "工作",
      value: 0,
    },
    {
      label: "生活",
      value: 1,
    },
    {
      label: "学习",
      value: 2,
    },
  ];
  doCancel() {
    this.$store.state.isModalShow = false;
  }

  submitForm(formName: any) {
    console.log("==save==")
   this.memo.categoryId = Number(this.memo.categoryId)
    if (this.memo.title.trim() && this.memo.content.trim()) {
      if (this.memo.id > -1) {
        this.$store.state.dataAction.editData(this.memo);
      } else {
        this.$store.state.dataAction.addData(this.memo);
      }

      this.$store.state.isModalShow = false;
    }else{
      this.$message.warning('请将信息填写完整')
    }
  }

  @Watch("$store.state.transData", { deep: true })
  onchangeMeno(newV: DataItem, oldV: DataItem) {
    console.log(oldV)
    this.memo = Object.assign({}, newV);
  }
}
</script>
<style lang="less" scoped>
</style>